<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<!-- 文本框 -->
				<textarea :cursor-spacing="18" placeholderStyle="color:#ccc;font-size:25rpx" placeholder="每条消息将会自动从账户扣除2元" auto-height="true" class="chat-send btn" :class="{displaynone:data.isrecord}" @input="inputs"
					@focus="focus" v-model="data.msg"></textarea>
				<view class="bt-img" @tap="more" v-if="!data.isSend">
					<fui-icon name="plussign" color="#7F7F7F"></fui-icon>
				</view>
				<view class="bt-img"
					style="border-radius: 12rpx;width: 100rpx;text-align: center;line-height: 60rpx;color: #fff;background-color: #49c265;"
					@tap="send(data.msg,'text')" v-else>
					发送
				</view>
			</view>

			<!-- 更多 -->
			<view class="more" :class="{displaynone:!data.ismore}">
				<view class="more-list" @tap="sendImg('album')">
					<image src="/static/image/chat/tp.png"></image>
					<view class="more-list-title">图片</view>
				</view>
				<view class="more-list" @tap="sendImg('camera')">
					<image src="/static/image/chat/pz.png"></image>
					<view class="more-list-title">拍照</view>
				</view>
				<view class="more-list" @tap="sendImg('hongbao')">
					<image src="/static/image/chat/hb.png"></image>
					<view class="more-list-title">红包</view>
				</view>
				<view class="more-list" @tap="sendImg('weizhi')">
					<image src="/static/image/chat/weizhi.png"></image>
					<view class="more-list-title">位置</view>
				</view>
			</view>
		</view>
		<view class="voice-bg" :class="{displaynone:!data.voicebg}">
			<view class="voice-bg-len">
				<view class="voice-bg-time" :style="{width:data.vlength/0.6+'%'}">
					{{data.vlength}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits()
	import { useUploadFile } from '@/hooks/useUploadFile.js'
	const { uploadFile, deleteFile, getFileInfo } = useUploadFile()
	import { ref, reactive, computed } from 'vue'
	const data = reactive({
		isrecord: false,
		ismore: false,
		voicebg: false,
		msg: "",
		timer: '', //计时器
		vlength: 0,
		isSend: false
	})
	const getElementHeight = () => {
		const query = uni.createSelectorQuery().in(this);
		query.select('.submit').boundingClientRect(res => {
			emit('heights', res.height);
		}).exec();
	}
	const inputs = (e) => {
		getElementHeight()
		var chatm = e.detail.value;
		var pos = chatm.indexOf('\n');
		if (chatm !== '') {
			data.isSend = true
		} else {
			data.isSend = false
		}
	}
	const focus = ()=> {
		//关闭其他项
		data.ismore = false
		setTimeout(() => {
			getElementHeight();
		}, 10)
	}
	const more = () =>{
		data.ismore = !data.ismore;
		//切换的时候关闭其他界面
		data.isrecord = false;
		setTimeout(() => {
			getElementHeight();
		}, 10)
	}
	const sendImg = (e) => {
		if(e=="hongbao"||e=="weizhi"){
			return 	uni.fui.toast("暂未开放")
		}
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: [e], //从相册选择
			// success: function (res) { //用function的方式会找不到send方法
			success: async(res) => {
				const resImg = await uploadFile(res.tempFiles, 'article', 'url')
				console.log(resImg);
				if(resImg){
					send(resImg[0].fileID, "image")
				}
			}
		});
	}
	const send = (msg, type) => {
		let date = {
			message: msg,
			type: type?type:"text"
		}
		emit('inputs', date);
		setTimeout(()=>{
			data.msg = '';
			data.isSend = false
		},10)
	}
</script>

<style lang="scss" scoped>
	.submit {
		background: rgba(244, 244, 244, 0.96);
		border-top: 1px solid rgba(39, 40, 50, 0.1);
		width: 100%;
		position: fixed;
		/* #ifdef APP-PLUS */
		bottom: 0rpx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		z-index: 100;
		// padding-bottom: var(--status-bar-height);
		// padding-bottom: env(safe-area-inset-bottom);
	}

	.displaynone {
		display: none;
	}

	.submit-chat {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 14rpx 14rpx;

		image {
			width: 56rpx;
			height: 56rpx;
			margin: 0 10rpx;
			flex: auto;
		}

		.btn {
			flex: auto;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			max-height: 160rpx;
			margin: 0 10rpx;
		}

		.chat-send {
			line-height: 44rpx;
		}

		.record {
			line-height: 44rpx;
			text-align: center;
			font-size: 20rpx;
			color: rgba(39, 40, 50, 0.6);
		}
	}

	.more {
		width: 100%;
		height: 356rpx;
		background: rgba(236, 237, 238, 1);
		box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
		bottom: env(safe-area-inset-bottom);
		padding: 8rpx 20rpx;
		box-sizing: border-box;

		.more-list {
			width: 25%;
			text-align: center;
			float: left;
			padding-top: 32rpx;

			image {
				width: 72rpx;
				height: 72rpx;
				padding: 12rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 24rpx;
			}

			.more-list-title {
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.5);
				line-height: 34rpx;
			}
		}
	}

	.voice-bg {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 1001;

		.voice-bg-len {
			height: 84rpx;
			width: 600rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 42rpx;
			text-align: center;
		}

		.voice-bg-time {
			display: inline-block;
			min-width: 120rpx;
			line-height: 84rpx;
			background-color: rgba(255, 228, 49, 1);
			border-radius: 42rpx;
		}

		.voice-del {
			position: absolute;
			bottom: -480rpx;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>